<template>
  <div>
  </div>
</template>

<script>
// 导入图片
const img = require('@/assets/带土.jpg');
const img2 = require('@/assets/置换图.jpg');
// 导入utils.js
import { oc } from '@/utils/index.js'
// 导入pixi.js
import * as PIXI from 'pixi.js'
// 导入捆绑包pixi/asstes
import { Assets } from '@pixi/assets';
// 导入pixi滤镜包
import { OutlineFilter, TwistFilter, ShockwaveFilter } from 'pixi-filters';

// 创建应用
const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x1099bb,
  resolution: window.devicePixelRatio || 1,// 分辨率
  antialias: true, // 抗锯齿
})
// 将应用画布添加到DOM中
document.body.appendChild(app.view)

// 导入一个图片作为精灵
const spriteImg = PIXI.Sprite.from(img);
// 设置精灵的大小
spriteImg.width = window.innerWidth;
spriteImg.height = window.innerHeight;
// 创建一个容器
const container = new PIXI.Container();
// 将精灵添加到容器中
container.addChild(spriteImg);
// 将容器添加到舞台中
app.stage.addChild(container);

// 创建一个文本
const text = new PIXI.Text('神威难藏泪', {
  fontFamily: 'Arial',
  fontSize: 100,
  fill: 'white',
  align: 'center',
  dropShadow: true,
  dropShadowColor: 'black',
  dropShadowBlur: 4,
  dropShadowAngle: oc(90),
  dropShadowDistance: 2,
});
// 设置文本的位置
text.position.set(window.innerWidth / 2 , window.innerHeight / 2 );
// 设置文本的锚点
text.anchor.set(0.5);
// 将文本添加到容器中
container.addChild(text);

// 创建置换图精灵
const displacementSprite = PIXI.Sprite.from(img2);
// 设置缩放
displacementSprite.scale.set(0.5);
// 允许重复
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
// 将置换图精灵添加到容器中
container.addChild(displacementSprite);

// 创建置换滤镜，并将置换图精灵添加到滤镜中
const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
container.filters = [displacementFilter];




// 创建冲击波滤镜的初始化函数
function initShockwaveFilter(num=3,position) {
  // 随机半径区间
  const radiusRange = [100, 200];
  // 随机振幅区间
  const amplitudeRange = [100, 200];
  // 随机波长区间
  const wavelengthRange = [50, 100];
  // 随机速度区间
  const speedRange = [200, 300];
  // 随机时间区间
  const timeRange = [0, 1];
  
  // 根据num创建多个冲击波滤镜
  const shockwaveFilters = [];
  for (let i = 0; i < num; i++) {
    // 创建冲击波滤镜
    const shockwaveFilter = new ShockwaveFilter(
      // 随机位置
      position?position:[Math.random() * window.innerWidth, Math.random() * window.innerHeight],
      {
        // 根据随机半径区间创建随机半径
        radius: Math.random() * (radiusRange[1] - radiusRange[0]) + radiusRange[0],
        // 根据随机振幅区间创建随机振幅
        amplitude: Math.random() * (amplitudeRange[1] - amplitudeRange[0]) + amplitudeRange[0],
        // 根据随机波长区间创建随机波长
        wavelength: Math.random() * (wavelengthRange[1] - wavelengthRange[0]) + wavelengthRange[0],
        // 根据随机速度区间创建随机速度
        speed: Math.random() * (speedRange[1] - speedRange[0]) + speedRange[0],
      },
      Math.random() * (timeRange[1] - timeRange[0]) + timeRange[0],// 时间,0是从中心开始扩散,1是从边缘开始扩散
    );
    // 将冲击波滤镜添加到数组中
    shockwaveFilters.push(shockwaveFilter);
  }
  // 将冲击波滤镜添加到容器中
  container.filters = [...container.filters,...shockwaveFilters];
}
initShockwaveFilter(5);

// 根据ticker为冲击波滤镜的每个时刻添加动画效果,并根据resetTime标记重置时间和位置
function tickerShockwaveFilter(){
  // 通过container.filters获取所有shockwaveFilters滤镜
  const shockwaveFilters = container.filters.filter(filter => filter instanceof ShockwaveFilter);
  // 随机重置时间区间
  const resetTimeRange = [1, 2];
  // 随机重置时间
  const resetTimeRandom = Math.random() * (resetTimeRange[1] - resetTimeRange[0]) + resetTimeRange[0];
  
  shockwaveFilters.forEach((shockwaveFilter) => {
    shockwaveFilter.time +=  0.01;
    if(shockwaveFilter.time > resetTimeRandom){
      shockwaveFilter.time = 0;
      shockwaveFilter.center = [Math.random() * window.innerWidth, Math.random() * window.innerHeight];
    }
  });
}

// 启动事件监听
app.stage.interactive = true;
// 鼠标单击时，创建冲击波滤镜
app.stage.on('pointerdown', (event) => {
  const shockwaveFilters = container.filters.filter(filter => filter instanceof ShockwaveFilter);
  // 修改某个冲击波滤镜的位置
  shockwaveFilters[0].center = [event.data.global.x, event.data.global.y];

});

// 创建ticker动画效果TODO
app.ticker.add((delta) => {
  // 置换图精灵的位置，实现水波纹效果
  displacementSprite.x += 1;
  displacementSprite.y += 1;
 
  // 调用冲击波滤镜函数
  tickerShockwaveFilter();
}); 

export default {
  name: 'App',
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
